<template>
  <div :id="chartId" style="width: 100%; height: 400px"></div>
</template>

<script>
import echarts from "echarts";
import service from "../../../service/projects";

export default {
  name: "chart1",
  components: {
    //someComponent
  },
  props: [
    "chartId",
    "chartYjryData",
    "chartLwData",
    "centerData",
    "lwxzList",
    "type",
  ],
  data() {
    return {
      msg: "Hello Vue.js",
      id: "",
      key: "",
      datas: [
        {
          project_code: "F0701",
          2018: "5.13%",
          2019: "0%",
          2020: "7.50%",
        },
        {
          project_code: "F070101",
          2018: "6.60%",
          2019: "20%",
          2020: "16.67%",
        },
        {
          project_code: "F070102",
          2018: "13.40%",
          2019: "14.29%",
          2020: "22.45%",
        },
        {
          project_code: "F070103",
          2018: "10.94%",
          2019: "13.46%",
          2020: "12.50%",
        },
        {
          project_code: "F070104",
          2018: "3.03%",
          2019: "10.53%",
          2020: "14.29%",
        },
        {
          project_code: "F070105",
          2018: "0%",
          2019: "4.17%",
          2020: "11.76%",
        },
        {
          project_code: "F070106",
          2018: "11.76%",
          2019: "0%",
          2020: "0%",
        },
        {
          project_code: "F070107",
          2018: "12.50%",
          2019: "14.29%",
          2020: "20%",
        },
        {
          project_code: "F070108",
          2018: "8.88%",
          2019: "14.75%",
          2020: "17.20%",
        },
        {
          project_code: "F070109",
          2018: "6.56%",
          2019: "19.79%",
          2020: "22.35%",
        },
        {
          project_code: "F0701010",
          2018: "7.14%",
          2019: "16.67%",
          2020: "23.73%",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  mounted: function () {
    this.initChart();
  },
  methods: {
    load2019Top10Data() {
      const schoolnameArr = [];
      this.chartDiv = echarts.init(document.getElementById(this.chartId));
      this.chartDiv.showLoading({
        text: "数据正在加载...",
        textStyle: { fontSize: 30, color: "#444" },
        effectOption: { backgroundColor: "rgba(0, 0, 0, 0)" },
      });
      this.chartDiv.hideLoading();

      service
        .getDatas(
          {
            columns: ["college_name", this.key, "count:id"],
            group: ["college_name", this.key],
            order: [["count:id", 1]],
            approval_year: 2019,
          },
          this.id
        )
        .then((res) => {
          res.data.forEach((item) => {
            schoolnameArr.push(item.college_name);
          });
          this.loadData(schoolnameArr);
        });
    },
    initChart() {
      // 'use strict';
      if (!document.getElementById(this.chartId)) return;
      echarts.init(document.getElementById(this.chartId)).dispose();
      this.chartDiv = echarts.init(document.getElementById(this.chartId));

      const xAxisData = this.datas.map((i) => i.project_code);
      let legendData = ["2018", "2019", "2020"];

      let seriesData = [];
      legendData.forEach((i, d) => {
        seriesData.push({
          name: i,
          type: "bar",
          // silent: true,
          // barWidth: "18",
          barMinHeight: 2,
          itemStyle: {
            // barBorderRadius: 11,
            normal: {
              label: {
                show: false,
                position: "top",
                textStyle: {
                  color: "black",
                  fontSize: 12,
                },
                formatter: '{c}%'
              },
            },
          },
          // barGap: '-100%', // Make series be overlap
          data: this.datas.map((j) => j[i].replace("%", "") * 1),
        });
      });
      // legendData.push("综合资助率");
      // seriesData.push({
      //   name: "综合资助率",
      //   type: "line",
      //   yAxisIndex: 1, //这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。
      //   data: this.datas.map((i) => i.rate),
      //   symbolSize: 10,
      //   smooth: true,
      //   itemStyle: {
      //     normal: {
      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //         {
      //           offset: 0,
      //           color: "rgb(255, 204, 102)",
      //         },
      //         {
      //           offset: 1,
      //           color: "rgb(255, 153, 51)",
      //         },
      //       ]),
      //       label: {
      //         show: true,
      //         formatter: "{c} %",
      //         position: "top",
      //         textStyle: {
      //           fontSize: "14",
      //           color: "rgb(255, 156, 54)",
      //         },
      //       },
      //     },
      //   },
      // });

      const option = {
        color: ["#3898e5", "#1bc481", "#ffaf3c", "#eb5e66"],
        title: {
          text: "F0701基金项目综合资助率",
          subtext: "{bold|2018年}  8.14%  {bold|2019年}  14.75%  {bold|2020年}  17.71%",
          top: 5,
          left: "center",
          textStyle: {
            fontSize: 16,
            color: "grey",
          },
          subtextStyle: {
            fontSize: 14,
            color: '#333',
            rich: {
              bold: {
                fontWeight: 'bold',
                fontSize: 14,
              }
            }
          }
        },
        animation: false,
        grid: {
          top: "80",
          left: "32",
          bottom: "30",
          right: "39",
          containLabel: true,
        },
        legend: {
          show: true,
          bottom: 0,
          // left: 'middle',
          data: legendData,
          textStyle: {
            // color: 'RGB(193,223,255)',
          },
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            var res = params[0].name;
            for (var i = 0; i < params.length; i++) {
              res +=
                "<br>" +
                params[i].marker +
                params[i].seriesName +
                "：" +
                params[i].data + '%';
            }
            return res;
          },
        },
        xAxis: [
          {
            type: "category",
            // name: '依托单位',
            nameTextStyle: {
              fontSize: 12, // 这个会影响坐标轴的字体大小，不懂为什么
              fontFamily: "微软雅黑",
              align: "center",
            },
            data: xAxisData,
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "rgba(202,202,202,0.15)",
              },
            },
            axisLabel: {
              rotate: 30,
              //   margin: 20,
              textStyle: {
                color: "black",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "资助率（%）",
            nameTextStyle: {
              fontSize: 12, // 这个会影响坐标轴的字体大小，不懂为什么
              fontFamily: "微软雅黑",
            },
            axisLabel: {
              textStyle: {
                // color: 'white',
                color: "black",
              },
              formatter: "{value}",
            },
            splitLine: {
              show: true,
              lineStyle: {
                // type: "dashed",
                color: "#E9E9E9",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "RGB(47,68,114)",
              },
            },
          },
          // {
          //   type: "value",
          //   name: "资助率",
          //   // min: "", //最小坐标
          //   // max: "", //最大坐标
          //   axisLabel: {
          //     fontSize: 14,
          //     color: "#333",
          //     formatter: "{value} %",
          //   },
          //   splitLine: {
          //     show: false, //是否显示分隔线。
          //   },
          // },
        ],
        series: seriesData,
      };

      this.chartDiv.setOption(option);
      window.addEventListener('resize',()=>{
        this.chartDiv.resize();
      });
    },
  },
};
</script>

<style scoped>
</style>
